<template>
	<view class="main">
		<view class="head">
			<view class="headTab">
				<view :class="tab==0?'headTab-item avatar':'headTab-item'" @click="onTab(0)">
					易货商家
				</view>
				<view :class="tab==1?'headTab-item avatar':'headTab-item'" @click="onTab(1)">
					码分商家
				</view>
			</view>
			<view class="headInput">
				<view class="headInput-box">
					<view class="headInput-boxIcon">
						<u-icon name="search" size="30" color="#A7A7A7"></u-icon>
					</view>
					<view class="headInput-boxInput">
						<input type="text" placeholder-style="font-size:28rpx" v-model="keyword" placeholder="输入关键词/门店名称" />
					</view>
					<view class="headInput-boxText" @click="gotoSearch()">
						搜索
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 260rpx;">
			
		</view>
		<view class="list">
			<view class="listItem" v-for="(item,i) in merchant_list">
				<view class="listItem-L" @tap="goshop(item)">
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="listItem-C">
					<view class="listItem-CTitle">
						{{item.shopname}}
					</view>
					<view class="listItem-CDate">
						营业时间：{{item.open_time}}
					</view>
					<view class="listItem-CText">
						<view class="listItem-CText-l">
							{{item.city}}
						</view>
						<view class="listItem-CText-r">
							<a :href="'tel:' + item.tel" style="text-decoration: none;">
								<view class="listItem-CText-rIcon" style="margin-right: 30rpx;">
									<u-icon name="phone-fill" size="30" color="#1B77FB"></u-icon>
								</view>
							</a>

							<a @tap="map(item)" style="text-decoration: none;">
								<view class="listItem-CText-rIcon">
									<u-icon name="map-fill" size="30" color="#1B77FB"></u-icon>
								</view>
							</a>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import jvue from '@/libs/jdk/jvue';
	
	
	export default {
		data() {
			return {
				tab:0,
				merchant_list:[],
				keyword:''
			}
		},
		onLoad(options) {
			let that = this;
			console.log(options);
			that.loadMerchantList();
			this.getLocationAuth()
		},
		onReachBottom() {
			if (this.page <= this.total_page && this.total_page != 0) {
				this.loadMerchantList();
			}
		},
		methods: {
			onTab(tabIndex){
				this.tab = tabIndex;
				this.loadMerchantList();
			},
			//获取定位
			getLocationAuth(){
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.loadMerchantList()
					},
					fail(res) {
						
						uni.showToast({
							'title':'对不起，获取位置失败！',
							'icon':'none'
						})
					}
				})
			},
			goshop(item){
				var url = "/city/new_pages/detail?id="+item.id;
				jvue.toUrl(url);
			},
			map(item){
				//var url = "/pages/product/list";
				//jvue.toUrl(url);
				let lat = item.lat;
				let lng = item.lng;
				window.open("https://api.map.baidu.com/marker?location="+lat+","+lng+"&output=html&src=webapp");
				
			},
			search(){
				uni.showLoading({	title: '加载中...',	mask: false		});
				
				
				var api_url = "/streetapi/localshoplist?page=";
				var url =  api_url + (this.page + 1) + '&category=' + this.selectedElement;
				url+="&key="+this.keyword;
				console.log("商家列表",url);
				uni.request({
					url: url,
					method: 'GET',
					data: {
						'leixing': this.tab+1,
					},
					success: res => {						
						console.log("loadMerchantList",res);
						if (res.data.total == null || res.data.total == 0) {
							this.total_page = 0
							this.loadTxt = '';
							this.empty = true
							console.log(res.data);

						} else {
							this.total_page = res.data.last_page
							this.empty = false
							this.merchant_list = res.data.data;
							console.log(this.merchant_list);
							this.page = res.data.current_page
							if(res.data.current_page == res.data.last_page)								
							{
								this.loadTxt = '没有更多数据了';
							}

						}
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});
							
			},
			loadMerchantList() {
				uni.showLoading({
					title: '加载中...',
					mask: false
				});
				
				var api_url =uni.getStorageSync('domain') + '/api/v1/merchant/list?page=';
				api_url = "/streetapi/localshoplist?page=";
				var url =  api_url + (this.page + 1) + '&category=' + this.selectedElement;
				console.log("商家列表",url);
				uni.request({
					url: url,
					method: 'GET',
					data: {
						'leixing': this.tab+1,
						'latitude' : this.latitude,
						'longitude' : this.longitude
					},
					success: res => {						
						console.log("loadMerchantList",res);
						if (res.data.total == null || res.data.total == 0) {
							this.total_page = 0
							this.loadTxt = '';
							this.empty = true
							uni.hideLoading();
						} else {
							this.total_page = res.data.last_page
							this.empty = false
							//this.merchant_list = [...this.merchant_list,...res.data.data]
							if(Array.isArray(this.merchant_list)){
								//this.merchant_list = [...this.merchant_list,...res.data.data];
								this.merchant_list = res.data.data;
							}
							else{
								this.merchant_list = res.data.data;
							}
							this.page = res.data.current_page
							if(res.data.current_page == res.data.last_page)								
							{
								this.loadTxt = '没有更多数据了';
							}
							uni.hideLoading();
						}
						
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});
			
			
			},
			gotoSearch() {		
				console.log("gotoSearch");
				
				uni.redirectTo({
					url:"?key="+this.keyword
				});
			}
		}
	}
</script>

<style>
	.main {
		background: #F7F8FA;
	}
	.head{
		position: fixed;
		top: 0;
		z-index: 1;
		width: 100%;
	}

	.headTab {
		background: #fff;
		display: flex;
		justify-content: space-around;
		height: 110rpx;
		line-height: 110rpx;
		font-size: 34rpx;
	}

	.avatar {
		color: #1677FF;
		position: relative;
	}

	.avatar::after {
		position: absolute;
		content: '';
		width: 60rpx;
		height: 4rpx;
		background: #1677FF;
		border-radius: 20rpx;
		bottom: 14rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.headInput {
		background: #F7F8FA;
		padding: 30rpx;
	}

	.headInput-box {
		background: #fff;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
	}

	.headInput-boxInput {
		margin: 0 10rpx;
		flex: 1;
		font-size: 28rpx;
		position: relative;
		top: 2rpx;
	}

	.headInput-boxText {
		font-size: 30rpx;
	}

	.list {
		padding: 30rpx;
		padding-top: 0;
	}

	.listItem {
		background: #fff;
		margin-bottom: 30rpx;
		display: flex;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.listItem-L image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}

	.listItem-C {
		margin-left: 20rpx;
	}

	.listItem-CTitle {
		font-size: 34rpx;
		margin-bottom: 20rpx;
	}

	.listItem-CDate {
		color: #ACACAE;
		margin-bottom: 20rpx;
	}

	.listItem-CText {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		color: #80878D;
	}

	.listItem-CText-r {
		display: flex;
	}

	.listItem-CText-rIcon {
		background: #E9F2FF;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>